<template>
	<view>
		<!-- 导航栏 -->
		<navBar pageTitle="个人中心" :bgColor="true"></navBar>

		<!-- #ifdef H5 -->
		<view :style="{height:'120rpx'}">
		</view>
		<!-- #endif -->

		<view class="user">
			<view class="user-bg">
				<image @tap="bgImg()" :src="userInfo.bgImgUrl" class="bg-img" mode="aspectFill"></image>
				<text @tap="changeBg()" class="bg-icon iconfont icon-Txu"></text>
			</view>
			<view class="user-info">
				<view class="user-about">
					<image @tap="editAvatar()" :src="userInfo.avatar" class="user-avatar" mode="aspectFill"></image>
					<view>
						<view @tap="popupShow = true">
							<text class="user-name">{{userInfo.name}}</text>
							<text class="name-icon iconfont icon-xiugai"></text>
						</view>
						<view class="user-id">Snow号：{{userInfo.snowId}}</view>

						<!-- 修改昵称弹出框 -->
						<view v-if="popupShow" @tap="popupShow = false" class="mask"></view>
						<view v-if="popupShow" class="popup">
							<view class="popup-content">
								<text @tap="popupShow = false" class="popup-icon iconfont icon-tuichuquanping"></text>
								<input type="text" focus class="input" v-model="userInfo.name" placeholder="请输入昵称" />
								<button @tap="editName()" class="button"> 确认修改</button>
							</view>
						</view>
					</view>
					
					<!-- #ifdef H5 -->
					<!-- 时钟 -->
					<view class="timer-content">
						<div class="clock">
							<div class="hour"></div>
							<div class="min"></div>
							<div class="sec"></div>
						</div>
					</view>
					<!-- #endif -->
				</view>

				<view class="user-card">
					<view class="card-first">
						<view class="first-item">
							<text class="first-icon iconfont icon-icon-test color-snow"></text>
							<p class="first-p">{{userInfo.snowNum}}</p>
							<text class="first-text">当前可用Snow花</text>
						</view>
					</view>
					<view @tap="handleCard(i)" class="card-item" v-for="(item,i) in infoList" :key="i"
						:class="[item.flag ? 'card-item-flag' : '',popupShow ? 'eventItem' : '']">
						<view class="item-info">
							<text class="item-icon iconfont" :class="[item.icon, item.flag ? 'color-snow' :'']"></text>
							<p class="item-p">{{item.title}}</p>
							<text class="item-text">{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<tabBar pagePath="pagesD/user/user"></tabBar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				infoList: [{
						icon: 'icon-icon-test',
						title: 'Snow花',
						text: '点击领取',
						flag: true
					},
					{
						icon: 'icon-xihuan-01',
						title: '收藏',
						text: '收藏的壁纸'
					},
					{
						icon: 'icon-xiazai',
						title: '下载',
						text: '下载的壁纸'
					},
					{
						icon: 'icon-shouye',
						title: '疑问',
						text: '常见的问题'
					},
				],

				// 是否显示弹出层
				popupShow: false,
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},

		methods: {
			// 修改昵称
			editName() {
				if (this.userInfo.name !== '') {
					this.$store.commit('user/editNickName', this.userInfo.name)
					this.toast('none', '修改成功')
					this.popupShow = false
					uni.showToast({
						icon: 'none',
						title: '已修改',
						duration: 500
					})

				} else {
					this.toast('none', '昵称不能为空哦')
				}

			},

			// 修改头像
			editAvatar() {
				// #ifdef H5
				this.chooseHFive(true)
				// #endif

				// #ifdef MP-WEIXIN
				this.album(true)
				// #endif

			},

			// 封装打开相册 微信小程序
			album(flag) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					sizeType: ['compressed'],
					success: (res) => {
						if (flag) {
							this.$store.commit('user/editImage', res.tempFiles[0].tempFilePath)
							this.toast('none', '修改头像成功')
						} else {
							this.$store.commit('user/editBgImg', res.tempFiles[0].tempFilePath)
							this.toast('none', '修改背景成功')
						}

					},
					fail: (err) => {
						this.toast('none', '取消选择')
					}
				})
			},

			// 封装选取图片 H5
			chooseHFive(flag) {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					sizeType: ['compressed'],
					success: (res) => {
						console.log(res);
						if (flag) {
							this.$store.commit('user/editImage', res.tempFiles[0].path)
							this.toast('none', '修改头像成功')
						} else {
							console.log(res.tempFilePaths[0]);
							this.$store.commit('user/editBgImg', res.tempFiles[0].path)
							this.toast('none', '修改背景成功')
						}
					},
				})
			},

			// 点击卡片内容
			handleCard(i) {

				if (i === 0) {
					this.$store.commit('user/addSnowNum', 1)
					this.toast('none', '领取成功')
				} else if (i === 1) {
					uni.navigateTo({
						url: '/pagesD/collection/collection'
					})
				} else if (i === 2) {
					uni.navigateTo({
						url: '/pagesD/download/download'
					})
				} else if (i === 3) {
					console.log('疑问');
					uni.navigateTo({
						url: '/pagesD/doubt/doubt'
					})
				}

			},

			// 预览背景图
			bgImg() {
				uni.previewImage({
					current: 0,
					urls: [this.userInfo.bgImgUrl],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片'],
						success: (res) => {
							console.log(res);
						},
						fail: (err) => {
							console.log(err.errMsg);
						}
					}
				})
			},

			// 更换背景图
			changeBg() {
				// #ifdef MP-WEIXIN
				this.album(false)
				// #endif

				// #ifdef H5
				this.chooseHFive(false)
				// #endif
			},

			// 再次封装轻提示
			toast(icon, title) {
				uni.showToast({
					icon: icon,
					title: title
				})
			},
		},
		mounted() {
			// #ifdef H5
			const deg = 6;
			const hour = document.querySelector(".hour");
			const min = document.querySelector(".min");
			const sec = document.querySelector(".sec");

			const setClock = () => {
				let day = new Date();
				let hh = day.getHours() * 30;
				let mm = day.getMinutes() * deg;
				let ss = day.getSeconds() * deg;

				hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
				min.style.transform = `rotateZ(${mm}deg)`;
				sec.style.transform = `rotateZ(${ss}deg)`;
			};

			// first time
			setClock();
			// Update every 1000 ms
			setInterval(setClock, 1000);
			// #endif

		}


	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #151515;
	}

	.user {
		.user-bg {
			width: 100%;
			height: 380rpx;
			background-color: #151515;

			.bg-img {
				width: 100%;
				height: 100%;
			}

			.bg-icon {
				position: absolute;
				top: 11%;
				right: 2%;
				font-size: 36rpx;
				color: #24a992;
			}
		}

		// 用户信息
		.user-info {
			position: absolute;
			margin-top: -80rpx;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #151515;
			border-radius: 50rpx 50rpx 0 0;

			// 用户头像和昵称
			.user-about {
				display: flex;
				align-items: center;
				padding: 40rpx;

				.user-avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.user-name {
					font-weight: 600;
					margin: 0 10rpx 0 20rpx;
				}

				.name-icon {
					font-size: 28rpx;
					color: #a4a4a6;
				}

				.user-id {
					margin: 10rpx 0 0 20rpx;
					font-size: 24rpx;
				}

				// 遮罩层
				.mask {
					position: absolute;
					top: 0;
					left: 0;
					transform: translate(0, -24%);
					width: 100vw;
					height: 100vh;
					background-color: #282c35;
					opacity: 0.5;
				}

				// 修改昵称弹出层
				.popup {
					position: fixed;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 500rpx;
					height: 350rpx;
					background-color: #222222;
					box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
					border-radius: 35rpx;
					text-align: center;

					.popup-content {
						transform: translate(0, 80%);

						.popup-icon {
							position: absolute;
							top: 0;
							right: 30rpx;
							transform: translate(0, -180%);
						}

						.button {
							text-decoration: none;
							position: relative;
							top: 60rpx;
							border: none;
							font-size: 14px;
							font-family: inherit;
							color: #fff;
							width: 250rpx;
							height: 80rpx;
							line-height: 80rpx;
							text-align: center;
							background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
							background-size: 300%;
							border-radius: 30px;
							z-index: 1;
							text-align: center;
							animation: ani 3s linear infinite;
						}

						@keyframes ani {
							0% {
								background-position: 0%;
							}

							100% {
								background-position: 400%;
							}
						}

						.button:before {
							content: '';
							position: absolute;
							top: -5px;
							left: -5px;
							right: -5px;
							bottom: -5px;
							z-index: -1;
							background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
							background-size: 400%;
							border-radius: 35px;
							transition: 1s;
							filter: blur(20px);
						}
					}
				}
			}
			
			/* #ifdef H5 */
			// 时钟
			.timer-content {
				flex: 1;
				margin-left: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				transition: all ease 0.2s;
			
				.clock {
					min-height: 150rpx;
					min-width: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-image: url("../../static/clock.png");
					background-position: center center;
					background-size: cover;
					border-radius: 50%;
					box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
						inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
						inset 0 15px 15px rgba(0, 0, 0, 0.3);
					transition: all ease 0.2s;
				}
			
				.clock:before {
					content: "";
					height: 10rpx;
					width: 10rpx;
					background-color: #cccccc;
					border: 2px solid #fff;
					position: absolute;
					border-radius: 50%;
					z-index: 1000;
					transition: all ease 0.2s;
				}
			
				.hour,
				.min,
				.sec {
					position: absolute;
					display: flex;
					justify-content: center;
					border-radius: 50%;
				}
			
				.hour {
					height:75rpx;
					width: 50rpx;
				}
			
				.hour:before {
					content: "";
					position: absolute;
					height: 50%;
					width: 4px;
					background-color: #888888;
					border-radius: 6px;
				}
			
				.min {
					height: 95rpx;
					width: 50rpx;
				}
			
				.min:before {
					content: "";
					height: 50%;
					width: 2px;
					background-color: #888888;
					border-radius: 4px;
				}
			
				.sec {
					height: 110rpx;
					width: 20rpx;
				}
			
				.sec:before {
					content: "";
					height: 60%;
					width: 1.5px;
					background-color: #f00;
					border-radius: 2px;
				}
			}
			/* #endif */


			// 用户其他信息
			.user-card {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
				padding: 0 30rpx;

				.card-first {
					width: 425rpx;
					height: 250rpx;
					background-color: #222222;
					border-radius: 35rpx;
					text-align: center;
					margin-bottom: 20rpx;

					.first-item {
						transform: translate(0, 15%);

						.first-icon {
							font-size: 50rpx;
						}

						.first-p {
							margin: 20rpx 0 15rpx 0;
							font-size: 50rpx;
						}

						.first-text {
							font-size: 26rpx;
							color: #c0c0c2;
							font-weight: 600;
						}
					}

				}

				@keyframes aniRotate {
					0% {
						// transform: rotate(0deg);
						transform: scale(0.8);
					}

					100% {
						// transform: rotate(360deg);
						transform: scale(1);
					}
				}

				.card-item-flag:active {
					animation: aniRotate .2s linear normal;
				}

				.eventItem {
					pointer-events: none;
				}

				.card-item {
					width: 200rpx;
					height: 250rpx;
					background-color: #222222;
					border-radius: 35rpx;
					text-align: center;
					margin-bottom: 20rpx;


					.item-info {
						transform: translate(0, 38%);

						.item-icon {
							font-size: 50rpx;
							color: #f1f2ed;
						}

						.item-p {
							color: #b8b8ba;
							font-size: 26rpx;
							font-weight: 600;
							margin: 25rpx 0 5rpx 0;
						}

						.item-text {
							font-size: 20rpx;
							color: #a4a4a6;
						}
					}



				}
			}

		}
	}
</style>